<template>

	<view class="content">
		<view class="form">
			<view class="form-item column" v-for="(v,k) in list" @click="toAdd(v)">
				<view class="form-item-title-box">
					<view>{{v.name}}</view>
					<view class="tool-icon">
						<image :src="$staticImagePath('/common/delete1.png')" @click.stop="del(v,k)"></image>
						<image :src="$staticImagePath('/common/edit.png')"></image>
					</view>
				</view>
				<view class="form-item-address">
					<view class="form-item-area" v-if="v.isdelivery == 0">可配送地区</view>
					<view class="form-item-area" v-if="v.else">包邮</view>
				</view>
				<view class="form-item-sku">
					<template v-for="(vv,kk) in v.children">
						<view v-if="kk != 0" style="border-bottom:1px solid #eee"></view>
						<view>{{vv.name}}</view>
						<view class="address-content">
							<text v-for="(v3,k3) in vv.address_text">
								<template v-if="k3 > 0">&nbsp;,&nbsp;</template>
								{{v3}}
							</text>
						</view>
						<view class="form-item-price">
							<view>首件{{vv.first}}{{getUnit(v)}}</view>
							<view>{{vv.first_fee}}元</view>
						</view>
						<view class="form-item-price">
							<view>首件{{vv.additional}}{{getUnit(v)}}</view>
							<view>{{vv.additional_fee}}元</view>
						</view>
					</template>
				</view>
			</view>
			<wanl-empty v-if="list.length == 0"></wanl-empty>
		</view>
		<view class="btn" @click="toAdd()">新增运费模版</view>
	</view>
</template>

<script>
	import {
		getLogisticsList,
		delLogistics
	} from '@/API/business.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				totalPage: 1,
			}
		},
		onShow() {
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			init() {
				this.page = 1
				this.getList()
			},
			getList() {
				if (this.page > this.totalPage) return
				getLogisticsList({
					page: this.page
				}).then(res => {
					let list = res.data.data
					if (this.page > 1) {
						list = this.list.concat(list)
					}
					this.list = list
					this.page++
					this.totalPage = res.data.last_page
				})
			},
			toAdd(item = null) {
				let options = ''
				console.log('-==item',item)
				if (item !== null) {
					options = '?id=' + item.id
				}
				uni.navigateTo({
					url: './add' + options
				})
			},
			getUnit(item) {
				let arr = ['件', 'kg', 'm²']

				return arr[item.valuation]
			},
			del(item, index) {
				uni.showModal({
					title: '确定删除该模版？',
					success: res => {
						if (res.confirm) {
							delLogistics({
								logistics_id: item.id
							}).then(res => {
								this.list.splice(index, 1)
								this.$st.show('删除成功')
								console.log('--=-r=es', res)
							}).catch(err => {
								console.log('-=-=-=err', err)
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 25rpx;

		.form {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			padding-bottom: 180rpx;

			&-card {
				padding: 0 30rpx;
				background-color: #fff;
				border-radius: 16rpx;
			}

			&-item {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&-title-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: 400;
					font-size: 30rpx;
					color: #121212;
					line-height: 36rpx;
					width: 100%;
					border-bottom: 1px solid #EEEEEE;
					padding-bottom: 20rpx;

					.tool-icon {
						display: flex;
						align-items: center;
						gap: 20rpx;

						image {
							width: 32rpx;
							height: 36rpx;
						}
					}
				}

				&-address {
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					width: 100%;
					padding-top: 31rpx;
				}

				&-sku {
					width: 100%;

					.address-content {
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						line-height: 40rpx;
						min-height: 50rpx;
						bottom: 50rpx;
						padding: 30rpx 0;
					}
				}

				&-price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 60rpx;
				}
			}
		}

		.btn {
			width: 610rpx;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			background: linear-gradient(90deg, #DD551B, #F49355);
			border-radius: 46rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			position: fixed;
			bottom: 50rpx;
			margin: auto;
			left: 0;
			right: 0;
		}
	}
</style>